<template>
	<!-- 项目列表 -->
	<div class='project-nav-box' :style="'padding-top:'+(barHeight)+'px'">
		<navBar left-icon="plusempty" @onLeftIcon="add">
			<template v-slot:center>
				<view class="nav_center">
					<view @click="onLeft" :class="navSelect === 'left' ? 'navActive' : ''">项目</view>
					<view @click="onRight" :class="navSelect === 'right' ? 'navActive' : ''">产品类型</view>
				</view>
			</template>
		</navBar>
		<view v-if="navSelect === 'left'" class="container_left">
			<ProjectList></ProjectList>
		</view>
		<view v-if="navSelect === 'right'" class="container_left">
			<ProductType></ProductType>
		</view>
	</div>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import ProjectList from './ProjectList.vue'
	import ProductType from './ProductType.vue'
	export default {
		components: {
			NavBar,
			ProjectList,
			ProductType
		},
		data() {
			return {
				navSelect: "left",
				barHeight: 0
			}
		},
		onReachBottom() {
			if (this.navSelect == 'left') {
				uni.$emit('onReachBottomProject')
			} else if (this.navSelect == 'right') {
				uni.$emit('onReachBottomType')
			}
		},
		onPullDownRefresh() {
			if (this.navSelect == 'left') {
				uni.$emit('onPullDownRefreshProject') // 设置监听事件
			} else if (this.navSelect == 'right') {
				uni.$emit('onPullDownRefreshType')
			}
		},
		// 子组件请求
		beforeMount() {
			uni.$on('projectList', (e) => {
				this.navSelect = e
			})
		},
		destroyed() {
			uni.$off('projectList')
		},
		created() {
			this.barHeight = uni.getSystemInfoSync().statusBarHeight + 45;
		},
		methods: {
			add() {
				if (this.navSelect == 'left') {
					uni.$emit('addProject')
				} else if (this.navSelect == 'right') {
					uni.$emit('addProductType')
				}
			},
			onLeft() {
				this.navSelect = "left"
			},
			onRight() {
				this.navSelect = "right"
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '../../static/css/commons.css';
</style>